<!-- 视图层 -->
<template>
    <div class="miao">
      <div class="tou">
          <span>限时秒杀</span>
      </div>
     <div class="heng">
     <ul>
      <li v-for="(item,index) in goodslist" :key="index">
          <img :src="item.img2" alt="">
          <p>{{item.originprice}}元</p>
          <b>{{ parseInt(item.originprice*1.4) }}</b>
      </li>
     </ul>
     </div>
    </div>
  </template>
  
  <!-- 逻辑层 -->
  <script setup>
  import { getSeckilllist } from '@/api/home'
  import { onMounted,ref } from 'vue';
   
  let goodslist = ref([])
  onMounted(()=>{
      getSeckilllist().then(({data:res})=> {
          goodslist.value = res.data
          // console.log(goodslist.value)
      })
      // getSeckilllist().then((res) =>{
      //     console.log(res.data)
      // })
  })
  
  </script>
  
  
  <!-- 样式层 -->
  <style scoped>
  .miao{
      background-color: #fff;
      height: 200px;
  }
  .tou{
      height: 45px;
  }
  span{
      color: #d42f1c;
      font-size: 17px;
      font-weight: 600;
      margin-left: 5px;
      line-height: 45px;
  }
  .heng{
      height: 100px;
      width: 900px;
  }
  ul{
      height: 180px;
      width: 375px;
      overflow-x: scroll;
      display: flex;
      background-color: #fff;
  }
  li{
      width: 120px;
      margin-left: 10px;
  }
  li img{
      width: 90px;
      height: 100px;
      
  }
  li p{
     color: #e12611;
     text-align: center;
     font-size: 15px;
  }
  b{
      margin-left: 35px;
      font-weight: 100;
      text-decoration: line-through;
  }
  /* .van-grid{
      height: 90px;
      width: 100%;
      overflow-x:scroll;
  }
  .van-image{
      width: 90px;
      height: 90px;
  } */
  
  /* li{
      height: 40px;
      width: 40px;
      background-color: #fff;
      border: 1px #ccc solid;
  }
  .box{
      display: flex;
      background-color: #fff;
  }
  .box img{
      width: 130px;
      height: 130px;
      margin-top: 10px;
      margin-left: 5px;
  } */
  </style>
  